<template>
  <Card
    shadow
    :bordered="false"
  >

    <Steps :current="current">
      <Step title="选择分类"></Step>
      <Step title="选择模型"></Step>
      <Step title="添加内容"></Step>
      <Step title="完成"></Step>
    </Steps>
    <Divider orientation="left">华丽的分割线</Divider>

    <component
      v-bind:is="dynComponent"
      @on-wst-articles-click="articlesChange"
      @on-nav-category="onNavCategory"
      @on-select-category="onSelectCategory"
    ></component>
    <Button
      type="primary"
      style="margin:0 20px 0 0"
      @click="next(-1)"
    >上一步</Button>
    <Button
      type="primary"
      style="margin:0 20px 0 0"
      @click="next(1)"
    >下一步</Button>
    <Button
      type="primary"
      @click="handleSubmit"
    >保存</Button>
  </Card>
</template>

<script>
import selectCategory from "./components/selectCategory";
import selectNav from "./components/selectNav";
import wst_articles from "./components/wst_articles";
import wst_goods from "./components/wst_goods";

export default {
  name: "add_content",
  components: {
    selectCategory,
    wst_goods,
    wst_articles,
    selectNav
  },
  data() {
    return {
      current: 0,
      type: 1,
      formData: {}
    };
  },
  computed: {
    dynComponent() {
      var current = this.current,
        dynComponent;
      switch (current) {
        case 0:
          dynComponent = "selectCategory";
          break;
        case 1:
          dynComponent = "selectNav";
          break;
        case 2:
          if (this.type == 1) dynComponent = "wst_articles";
          else dynComponent = "wst_goods";
          break;

        default:
          dynComponent = "selectCategory";
          break;
      }
      return dynComponent;
    }
  },
  methods: {
    // 文章 数据返回
    articlesChange(obj) {},
    // 选择后台分类
    onSelectCategory(obj) {
      console.log(obj);
    },
    // 选择模型和前端分类
    onNavCategory(obj) {
      console.log(obj);
      this.type = obj.type;
    },

    handleSubmit() {},
    next(n) {
      this.current += n;
      if (this.current == 4) {
        this.current = 0;
      }
      if (this.current == -1) {
        this.current = 3;
      }
    }
  }
};
</script>
